<!DOCTYPE html>
<html lang="zh">

<head>
	<th:block th:include="include :: header('模型管理')" />
	<th:block th:include="include :: layout-latest-css" />
	<th:block th:include="include :: ztree-css" />
</head>
<style>
	.container {
		width: 100%;
		height: 200px;
		overflow: auto;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.flex {
		display: flex;
	}
</style>

<body class="gray-bg">
	<!-- <div class="ui-layout-west">
		<div class="box box-main">
			<div class="box-header">
				<div class="box-title">
					<i class="fa icon-grid"></i> 组织机构
				</div>
				<div class="box-tools pull-right">
					<button type="button" class="btn btn-box-tool" id="btnExpand" title="展开" style="display:none;"><i
							class="fa fa-chevron-up"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnCollapse" title="折叠"><i
							class="fa fa-chevron-down"></i></button>
					<button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新部门"><i
							class="fa fa-refresh"></i></button>
				</div>
			</div>
			<div class="ui-layout-content">
				<div id="tree" class="ztree"></div>
			</div>
		</div>
	</div> -->
	<div class="ui-layout-center">
		<div class="container-div">
			<div class="row">
				<div class="col-sm-12 search-collapse">
					<form id="user-form">
						<!-- <input type="hidden" id="parentId" name="parentId"> -->
						<div class="select-list">
							<ul>
								<li>
									<input type="hidden" id="sceneId" name="sceneId">
								</li>
								<li>
									模型名称:<input type="text" name="templateName" id="templateName" placeholder="请输入内容" />
								</li>
								<li style="display: flex;">
									<label style="width: 70px;">请选择机构:</label>
									<select id="first1" style="max-width:120px" class="first1 form-control m-b shebei">
										<option value="">请选择</option>
									</select>
								</li>
								<li>
									<select id="second2" style="max-width:120px;margin-left: 20px;margin-right: 20px"
										class="second2 form-control m-b shebei">
										<option value="">请选择</option>
									</select>
								</li>
								<li>
									<select id="third3" style="max-width:120px" class="third3 form-control m-b shebei">
										<option value="">请选择</option>
									</select>
								</li>
								<li>
									<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i
											class="fa fa-search"></i>&nbsp;搜索</a>
									<a class="btn btn-warning btn-rounded btn-sm" id="reset"><i
											class="fa fa-refresh"></i>&nbsp;重置</a>
								</li>
							</ul>
						</div>
					</form>
				</div>

				<div class="btn-group-sm" id="toolbar" role="group">
					<a class="btn btn-success" id="add">
						<i class="fa fa-plus"></i> 添加模型
					</a>
				</div>

				<div class="col-sm-12 select-table table-striped">
					<table id="bootstrap-table"></table>
				</div>
			</div>
		</div>
	</div>

	<!-- 这是新增的弹框 -->
	<div class="modal " id="add-scene-dialog" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated flipInY">

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span
							aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">添加模型</h4>
				</div>

				<div class="modal-body">
					<input type="hidden" name="sceneId" id="current-scene-id" value="" />
					<div class="control-label">模型名称：</div>
					<div class="input-wrap">
						<input class="form-control" type="text" name="templateName" id="addTemplateName"
							placeholder="请输入新的模型名称" maxlength="30" />
					</div>
					<div class="control-label">所属机构:</div>
					<div class="input-wrap">
						<div class="flex">
							<select name="dev_azdw1_id" id="first" style="max-width:120px"
								class="first form-control m-b">
								<option value="">请选择</option>
							</select>
							<select name="dev_azdw2_id" id="second"
								style="max-width:120px;margin-left: 20px;margin-right: 20px"
								class="second form-control m-b">
								<option value="">请选择</option>
							</select>
							<select name="dev_azdw3_id" id="third" style="max-width:120px"
								class="third form-control m-b">
								<option value="">请选择</option>
							</select>
						</div>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="submitAddScene()">保存</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 这是复制的弹框 -->
	<div class="modal " id="edit-scene-dialog" tabindex="-1" role="dialog" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content animated flipInY">

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"><span
							aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title">复制模型</h4>
				</div>

				<div class="modal-body">
					<input type="hidden" name="sceneId" id="current-scene-id" value="" />
					<div class="control-label">模型名称：</div>
					<div class="input-wrap">
						<input class="form-control" type="text" name="templateName2" id="templateName2"
							placeholder="请输入新的模型名称" maxlength="30" />
					</div>
					<div class="control-label">所属点位：</div>
					<div class="input-wrap">
						<input class="form-control" readonly="true" type="text" name="scene2" id="scene2" value="" />
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" onclick="submitEditScene()">保存</button>
				</div>
			</div>
		</div>
	</div>

	<th:block th:include="include :: footer" />
	<th:block th:include="include :: layout-latest-js" />
	<th:block th:include="include :: ztree-js" />
	<script th:inline="javascript">
		var prefix = ctx + "youtian/template/list";

		//左侧树ID
		var Id;
		//复制模型Id
		var copyId;
		//列表数据
		var list = [];
		//点位
		var nodes;
		var edges;
		//下拉框选中节点的id
		var firstID;
		var secondID;
		var thirdID;
		//添加新增的字段
		var fdwdm = null;
		var fdwdm_name = null;
		$(function () {
			var panehHidden = false;
			if ($(this).width() < 769) {
				panehHidden = true;
			}
			$('body').layout({ initClosed: panehHidden, west__size: 185 });
			// 回到顶部绑定
			if ($.fn.toTop !== undefined) {
				var opt = {
					win: $('.ui-layout-center'),
					doc: $('.ui-layout-center')
				};
				$('#scroll-up').toTop(opt);
			}
			queryUserList();
			queryDeptTree();
			initfirst(1)
		});

		function queryDeptTree() {
			var url = "/gzmx_scdw/gzmx_scdw/basicTreeData";
			var options = {
				url: url,
				expandLevel: 2,
				onClick: zOnClick,
			};
			let ab = $.tree.init(options);
			function zOnClick(event, treeId, treeNode) {
				$("#sceneId").val(treeNode.id);
				$("#parentId").val(treeNode.pId);
				Id = treeNode.id
				console.log(treeId, 'treeId');
				$('#scene').val(treeNode.title);
				$('#scene2').val(treeNode.title);
				$.table.search();
			}
		}

		function queryUserList() {
			var options = {
				url: '/youtian/template/list',
				createUrl: '/page-route-new/template-management/add',
				updateUrl: '/page-route-new/template-management/edit',
				removeUrl: "/youtian/template/delete/{id}",
				sortName: "createTime",
				sortOrder: "desc",
				modalName: "模型",
				columns: [{
					checkbox: true
				},
				{
					field: 'templateName',
					title: '模型名称',
					sortable: true
				},
				{
					field: 'templateId',
					title: '模型id'
				},
				{
					visible: status == 1 ? '已发布' : '发布',
					title: '状态',
					align: 'center',
					formatter: function (value, row, index) {
						return statusTools(row);
					}
				},
				{
					title: '操作',
					align: 'center',
					formatter: function (value, row, index) {
						let ind = list.filter(item => {
							return item.templateId == row.templateId
						})
						if (ind.length == 0) {
							list.push(row)
						}
						var actions = [];
						actions.push(`<a class="btn btn-success btn-xs ' + '" href="javascript:void(0)" onclick="jumpmodel('${row.templateId},${row.owner},${row.sceneId}')"><i class="fa fa-gear"></i>模型设计</a>`)
						actions.push('<a class="btn btn-danger btn-xs  ' + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.templateId + '\')" style="margin-left:10px;display:inline-block;margin-right:10px;"><i class="fa fa-remove""></i>删除</a>')
						actions.push(`<a class="btn btn-primary btn-xs ' + '" href="javascript:void(0)" onclick="share('${row.templateId},${row.owner},${row.shareStatus}')"><i class="fa fa-share""></i>${row.shareStatus == 0 ? '分享' : '取消分享'}</a>`)
						actions.push(`<a class="btn btn-primary btn-xs release' + '" href="javascript:void(0)" onclick="release('${row.templateId},${row.owner},${row.status}')" style="margin-left:10px;display:inline-block;margin-right:10px;"><i class="fa fa-refresh""></i>${row.status == 0 ? '发布' : '取消发布'}</a>`)
						actions.push(`<a class="btn btn-info btn-xs ' + '" href="javascript:void(0)" onclick="copy('${row.templateId}')"><i class="fa fa-edit""></i>复制</a>`)
						return actions.join('');
					}
				}]
			};
			$.table.init(options);
		}

		$('#btnExpand').click(function () {
			$._tree.expandAll(true);
			$(this).hide();
			$('#btnCollapse').show();
		});

		$('#btnCollapse').click(function () {
			$._tree.expandAll(false);
			$(this).hide();
			$('#btnExpand').show();
		});

		$('#btnRefresh').click(function () {
			queryDeptTree();
		});


		/*发布状态信息显示 */
		function statusTools(row) {
			if (row.status == 1) {
				return '已发布';
			} else {
				return '未发布';
			}
		}

		//跳转模型设计
		function jumpmodel(row) {
			var id = row.split(',');
			console.log(` id 222 ================ `)
			console.log(id)
			if (!id[1]) {
				 $.modal.msg('你不是创建者,不可以跳转模型设计')
				 return
			}
			let url = `/page-route/template-edit?templateId=${id[0]}&type=1&owner=${id[1]}&treeId=${id[2]}`
			// window.location.replace(url);
			// window.open(url,'_self')
			// window.open(url,'_blank')
			createMenuItem(url,'模型设计')
		}

		//发布
		function release(row) {
			var row = row.split(',')
			if (row[1] == 'false') {
				return $.modal.msg('你不是创建者,不可以发布')
			} else {
				if (row[2] == 0) {
					let status = 1
					let content = `是否发布当前信息`;
					$.modal.confirm(content, function (index) {
						// console.log(index, '确认发布');
						let list = {
							status: status,
							templateId: row[0]
						}
						$.ajax({
							url: "/youtian/template/updateTemplate",
							type: "POST",
							dataType: "json",
							data: JSON.stringify(list),
							headers: { "Content-Type": "application/json" },
							success: function (res) {
								$.modal.msgSuccess('发布成功');
								$.table.refresh()
							}
						})
					});
				} else {
					let status = 0
					let content = `是否取消发布当前信息`;
					$.modal.confirm(content, function (index) {
						// console.log(index, '取消发布');
						let list = {
							status: status,
							templateId: row[0]
						}
						$.ajax({
							url: "/youtian/template/updateTemplate",
							type: "POST",
							dataType: "json",
							data: JSON.stringify(list),
							headers: { "Content-Type": "application/json" },
							success: function (res) {
								$.modal.msgSuccess('取消发布成功');
								$.table.refresh()
								$('.release').innerHTML('发布')
							}
						})
					});
				}
			}
		}

		//添加下拉框
		function initfirst(objDivId) {
			console.log(objDivId, 'objDivId1');
			$.ajax({
				method: "post",
				url: "/gzmx_scdw/gzmx_scdw/list",
				data: { jb: objDivId },
				success: function (result) {
					console.log(result, 'res');
					var rows = result.length;
					var html = `<option value="">请选择</option>`
					var html1 = `<option value="">请选择</option>`
					for (let i = 0; i < result.length; i++) {
						html += `<option value="` + result[i].id + `">` + result[i].dwmc + `</option>`
						html1 += `<option value="` + result[i].id + `">` + result[i].dwmc + `</option>`
					}
					$("#first").html(html);
					$("#first1").html(html1);
					$("#first").change(function () {
						$("#dev_azdw1_name").val($(this).find('option:selected').text());
						initsecond($("#first").val());
						fdwdm = $("#first").val();
						fdwdm_name = $("#first").find("option:selected").text();
						console.log(fdwdm, fdwdm_name, '--------------');
					});
					$("#first1").change(function () {
						$("#sceneId").val($(this).val());
						initsecond($("#first1").val());
					});
				},
				error: function (error) {
					$.modal.alertWarning(error);
				}
			});
		}
		function initsecond(objDivId) {
			firstID = objDivId;
			$.ajax({
				type: "post",
				url: "/gzmx_scdw/gzmx_scdw/list",
				data: {
					"fdwdm": objDivId,
				},
				success: function (result) {
					var rows = result.length;
					var html = `<option value="">请选择</option>`;
					var html2 = `<option value="">请选择</option>`;
					for (let i = 0; i < result.length; i++) {
						html += `<option value="` + result[i].id + `">` + result[i].dwmc + `</option>`
						html2 += `<option value="` + result[i].id + `">` + result[i].dwmc + `</option>`
					}
					$("#second").html(html);
					$("#second2").html(html2);
					$("#second").change(function () {
						initthird($("#second").val());
						$("#dev_azdw2_name").val($(this).find('option:selected').text());
					});
					$("#second2").change(function () {
						initthird($("#second2").val());
						$("#sceneId").val($(this).val());
					});
				},
				error: function (error) {
					$.modal.alertWarning(error);
				}
			});
		}
		function initthird(objDivId) {
			secondID = objDivId;
			$.ajax({
				type: "post",
				url: "/gzmx_scdw/gzmx_scdw/list",
				data: {
					"fdwdm": objDivId,
				},
				success: function (result) {
					var rows = result.length;
					//alert(rows);
					var html = `<option value="">请选择</option>`
					var html3 = `<option value="">请选择</option>`
					for (let i = 0; i < result.length; i++) {
						html += `<option value="` + result[i].id + `">` + result[i].dwmc + `</option>`
						html3 += `<option value="` + result[i].id + `">` + result[i].dwmc + `</option>`
					}
					$("#third").html(html);
					$("#third3").html(html3);
					$("#third").change(function () {
						initfourth($("#third").val());
						$("#dev_azdw3_name").val($(this).find('option:selected').text());
					});
					$("#third3").change(function () {
						initfourth($("#third3").val());
						$("#sceneId").val($(this).val());
					});
				},
				error: function (error) {
					$.modal.alertWarning(error);
				}
			});
		}
		function initfourth(objDivId) {
			thirdID = objDivId
		}

		//搜索
		$('#search').on('click', function () {
			var sceneID;

			if ($("#second2").val() == '' && $("#third3").val() == '') {
				sceneID = $("#first1").val();
			} else if ($("#third3").val() == '') {
				sceneID = $("#second2").val();
			} else if ($("#third3").val() != '') {
				sceneID = $("#third3").val();
			}
			// console.log(sceneId);
			let page = {
				templateName: $('#templateName').val(),
				sceneId: sceneID
			}
			$.ajax({
				url: "/youtian/template/list",
				dataType: "json",
				type: "post",
				headers: { "Content-Type": "application/x-www-form-urlencoded" },
				data: page,
				success: function (res) {
					console.log(res);
					queryUserList(res.rows)
				},
			});
		})

		//添加
		$('#add').on('click', function () {
			$('#add-scene-dialog').modal('show');
		})

		//添加保存
		function submitAddScene() {
			var ID;
			if (thirdID == undefined && secondID == undefined) {
				ID = firstID;
			} else if (thirdID == undefined) {
				ID = secondID;
			} else if (thirdID != undefined) {
				ID = thirdID;
			}
			var data = {
				sceneId: ID,
				templateName: $('#addTemplateName').val(),
				fdwdm_name: fdwdm_name,
				fdwdm: fdwdm
			}
			console.log(data);
			$.ajax({
				url: '/youtian/template/saveTemplate',
				dataType: "json",
				method: "POST",
				headers: { "Content-Type": "application/json" },
				data: JSON.stringify(data),
				success: function (res) {
					$.modal.alertSuccess('添加成功');
					$('#add-scene-dialog').modal('hide');
					$('#templateName').val('')
					$('#first').val('')
					$('#second').val('')
					$('#third').val('')
					$.table.refresh();
				}
			})
		}

		//分享
		function share(row) {
			var row = row.split(',')
			if (row[1] == 'false') {
				return $.modal.msg('你不是创建者,不可以发布')
			} else {
				if (row[2] == 0) {
					let shareStatus = 1
					let content = `是否分享当前信息`;
					$.modal.confirm(content, function (index) {
						// console.log(index, '确认发布');
						let list = {
							"templateId": row[0],
							"shareStatus": shareStatus
						}
						$.ajax({
							url: "/youtian/template/shareTemplate",
							type: "POST",
							dataType: "json",
							data: JSON.stringify(list),
							headers: { "Content-Type": "application/json" },
							success: function (res) {
								$.modal.msgSuccess('分享成功');
								$.table.refresh()
							}
						})
					});
				} else {
					let shareStatus = 0;
					let content = `是否取消分享当前信息`;
					$.modal.confirm(content, function (index) {
						// console.log(index, '确认发布');
						let list = {
							"templateId": row[0],
							"shareStatus": shareStatus
						}
						$.ajax({
							url: "/youtian/template/shareTemplate",
							type: "POST",
							dataType: "json",
							data: JSON.stringify(list),
							headers: { "Content-Type": "application/json" },
							success: function (res) {
								$.modal.msgSuccess('取消分享成功');
								$.table.refresh()
							}
						})
					});
				}
			}
		}

		//复制
		function copy(row) {
			// var row = row.split(',')
			let obj = list.find(item => {
				return item.templateId == row
			})
			console.log(obj);
			nodes = obj.nodes;
			edges = obj.edges;
			copyId = obj.templateId;
			Id = obj.sceneId;
			$('#scene2').val(obj.deptName);
			$('#edit-scene-dialog').modal('show')
		}

		//复制保存
		function submitEditScene(row) {
			var inp = $('#templateName2').val()
			if (inp == '') {
				return $.modal.msg('请输入模型名称')
			} else {
				$.ajax({
					url: '/youtian/template/copyTemplate',
					method: "POST",
					headers: { "Content-Type": "application/json" },
					data: JSON.stringify({
						sceneId: Id,
						templateName: inp,
						templateId: copyId,
						nodes: nodes,
						edges: edges
					}),
					success: function (res) {
						console.log(res);
						$.modal.msg('复制成功')
						$('#edit-scene-dialog').modal('hide')
						$.table.refresh()
					}
				})
			}
		}


		//重置
		$('#reset').on('click', function () {
			$("#sceneId").val('');
			$('#templateName').val('')
			$('#first1').val('')
			$('#second2').val('')
			$('#third3').val('')
			$.table.refresh()
		})
	</script>
</body>

</html>